<template>
	<view>
		<!-- Content -->
		<view class="container">
			<!-- Toolbar -->
			<pyh-nv ref="nv" :config="nvConfig"></pyh-nv>
			<!-- Backdrop -->
			<view class="topBackrop">
				<view :style="{'padding-top':((actionBarHeight+5)+'px')}"></view>
				<!-- Banner -->
				<swiper circular :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500"
					class="banner">
					<swiper-item class="banner-item" v-for="(item , index) in banners" :key="index">
						<image class="banner-item" :src="item" mode="aspectFill" lazy-load="true"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 通知 -->
			<view class="uni-flex notice-container ">
				<image class="notice-img" src="../../../static/ic_notice_complete.png" mode="widthFix"></image>
				<swiper circular :indicator-dots="false" :autoplay="true" :interval="4000" :duration="500"
					:vertical="true" class="notice">
					<swiper-item class="notice-item" v-for="(item , index) in notices" :key="index">
						<view class="notice-text">{{item.text}}</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 下单快捷入口 -->
			<view class="place-order">
				<!-- 统计 -->
				<view class="uni-flex uni-row">
					<view class="place-order-statistics" style="-webkit-flex: 1;flex: 1;">—— 已成功运输车辆8789876 ——</view>
				</view>
				<!-- 出发地 -->
				<view class="uni-flex place-order-item">
					<image class="place-order-image" src="@/static/ic_starting_point.png"></image>
					<view class="place-order-text" style="-webkit-flex: 1;flex: 1;">请选择出发地</view>
					<text class="uni-panel-icon uni-icon place-order-image">{{'&#xe470;'}}</text>
				</view>
				<!-- 目的地 -->
				<view class="uni-flex place-order-item">
					<image class="place-order-image" src="@/static/ic_end_point.png"></image>
					<view class="place-order-text" style="-webkit-flex: 1;flex: 1;">请选择目的地</view>
					<text class="uni-panel-icon uni-icon place-order-image">{{'&#xe470;'}}</text>
				</view>
				<!-- 运输时间 -->
				<view class="uni-flex place-order-item">
					<image class="place-order-image" src="@/static/ic_datetime.png"></image>
					<view class="place-order-text" style="-webkit-flex: 1;flex: 1;">请选择运输时间</view>
					<text class="uni-panel-icon uni-icon place-order-image">{{'&#xe470;'}}</text>
				</view>
				<!-- 更多资料 -->
				<view class="uni-flex  place-order-more">
					<view class="place-order-more-text" style="-webkit-flex: 1;flex: 1;">填写更多信息</view>
					<text class="uni-panel-icon uni-icon place-order-more-image"
						style="transform: rotate(90deg);">{{'&#xe470;'}}</text>
				</view>
				<!-- 获取报价 -->
				<view class="place-order-get" @tap="onPlaceOrder">获取报价</view>
				<!-- Tips -->
				<view class="place-order-tips">*您提供的信息较为概括，因此报价为预估价格。</view>
			</view>
			<!-- 立即下单 / 咨询客服 -->
			<view class="uni-flex place-order-menu">
				<view class="place-order-menu-item" style="-webkit-flex: 1;flex: 1;">
					<image class="place-order-menu-item-img" src="@/static/ic_place_order.png"></image>
					<view class="place-order-menu-item-txt">立即下单</view>
				</view>
				<view style="-webkit-flex: 1;flex: 0.05;"></view>
				<view class="place-order-menu-item" style="-webkit-flex: 1;flex: 1;">
					<image class="place-order-menu-item-img" src="@/static/ic_cusomer_service.png"></image>
					<view class="place-order-menu-item-txt">咨询客服</view>
				</view>
			</view>
			<!-- 服务优势 -->
			<view class="service-advantages">
				<view class="uni-flex" style="display: flex;align-items: center;justify-content: center; ">
					<image style="width: 30rpx; scale: 1.5;" src="@/static/ic_title_left.png" mode="widthFix"></image>
					<view class="service-advantages-text">服务优势</view>
					<image style="width: 30rpx; scale: 1.5;" src="@/static/ic_title_right.png" mode="widthFix"></image>
				</view>
				<view style="width: 100%;">
					<view class="uni-flex" style="width: 100%; margin-top: 40rpx;"
						v-for="(item,index) in serviceAdvantages" :key="index">
						<image class="uni-flex"
							style=" width: 100rpx; display: flex; align-items: center; justify-content: center;"
							:src="item.icon" mode="widthFix"></image>
						<view
							style="width: 100%; display: flex; flex-direction: column; align-items: center;justify-content: center; margin-left: 24rpx;">
							<view class="service-advantages-text" style="justify-content: flex-start;">{{item.title}}
							</view>
							<view class="service-advantages-text"
								style="justify-content: flex-start; color: rgba(41, 43, 53, 0.7); font-size: 26rpx; font-weight: 300; margin-top: 15rpx;">
								{{item.subTitle}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 运车实况 -->
			<view class="service-facts">
				<view class="uni-flex" style="display: flex;align-items: center;justify-content: center; ">
					<image style="width: 30rpx; scale: 1.5;" src="@/static/ic_title_left.png" mode="widthFix"></image>
					<view class="service-facts-text">运车实况</view>
					<image style="width: 30rpx; scale: 1.5;" src="@/static/ic_title_right.png" mode="widthFix"></image>
				</view>
				<uni-grid class="service-facts-box" :column="2" :square="false" :highlight="false" :showBorder="false">
					<uni-grid-item v-for="(item, index) in 4" :index="index" :key="index">
						<view class="service-facts-box-item">
							<image class="service-facts-box-item-image" lazy-load="true" src="@/static/ic_cover_def.png"></image>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<!-- 登录提示弹窗 -->
		<LoginTips ref="loginTips" type="loginTips"></LoginTips>
	</view>
</template>

<script>
	import LoginTips from '../../popup/LoginTips.vue'
	export default {
		components: {
			LoginTips,
		},
		data() {
			return {
				nvConfig: {
					tilte: "嗨拉",
					type: "logo",
					logo: {
						src: "/static/ic_title_logo.png",
						style: "width:72rpx"
					},
					fixedAssist: {
						hide: true,
					},
					transparent: {
						initColor: "#000000",
					},
					back: {
						hide: true
					}
				},
				banners: [
					"https://imgcps.jd.com/ling4/100035927374/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa42/60f03300/cr/s/q.jpg",
					"https://img12.360buyimg.com/pop/s1180x940_jfs/t1/217650/27/18929/95548/627b69e5E7f4c1ff2/1a6be6e037e34e5c.jpg.webp",
					"https://imgcps.jd.com/ling4/100012043978/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa09/00d13111/cr/s/q.jpg",
					"https://imgcps.jd.com/ling4/100035927374/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa42/aa5a1911/cr/s/q.jpg",
				],
				notices: [{
						imageUrl: "/static/c1.png",
						text: "13126595606 哈尔滨市 托运至 上海市 哈尔滨市 托运至 上海市 哈尔滨市 托运至 上海市"
					},
					{
						imageUrl: "/static/c2.png",
						text: "13126595606 哈尔滨市 托运至 上海市 哈尔滨市 托运至 上海市 哈尔滨市 托运至 上海市"
					},
					{
						imageUrl: "/static/c3.png",
						text: "13126595606 哈尔滨市 托运至 上海市 哈尔滨市 托运至 上海市 哈尔滨市 托运至 上海市"
					}
				],
				serviceAdvantages: [{
					icon: "/static/ic_service_advantages_01.png",
					title: "3分钟内快速报价",
					subTitle: "免费获取实时报价，确认后谢绝临时加价"
				}, {
					icon: "/static/ic_service_advantages_02.png",
					title: "3全国网点覆盖",
					subTitle: "300+服务城市，运力辐射全国各地"
				}, {
					icon: "/static/ic_service_advantages_03.png",
					title: "3专属客服",
					subTitle: "一对一管家式服务，实时解答运车疑问"
				}, {
					icon: "/static/ic_service_advantages_04.png",
					title: "全程节点跟踪",
					subTitle: "全程位置跟踪，及时了解车辆信息"
				}],
			}
		},
		computed() {

		},
		onReady() {

		},
		onLoad() {

		},
		onPageScroll(e) {
			this.$refs.nv.pageScroll(e)
		},
		onPullDownRefresh() {
			this.requestData()
		},
		computed: {
			actionBarHeight() {
				return parseInt(88 * uni.getSystemInfoSync().windowWidth / 750) + uni.getSystemInfoSync().statusBarHeight
			}
		},
		methods: {
			onPlaceOrder() {
				// 未登录
				this.$refs.loginTips.showBottom()
				
				// uni.navigateTo({
				// 	url: '/pages/login/Login'
				// })
				
			},
			// 请求Data
			requestData() {
				console.log('requestData');
				setTimeout(() => {
					console.log('requestData -> END');
					uni.stopPullDownRefresh();
				}, 1000)
			},
			// 请求Banner
			requestBanner() {
				// var _self = this;
				// self.banners = [
				// 	"https://imgcps.jd.com/ling4/100035927374/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa42/60f03300/cr/s/q.jpg",
				// 	"https://img12.360buyimg.com/pop/s1180x940_jfs/t1/217650/27/18929/95548/627b69e5E7f4c1ff2/1a6be6e037e34e5c.jpg.webp",
				// 	"https://imgcps.jd.com/ling4/100012043978/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa09/00d13111/cr/s/q.jpg",
				// 	"https://imgcps.jd.com/ling4/100035927374/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa42/aa5a1911/cr/s/q.jpg",
				// ]
				// // uni.request({
				// //     url: 'http://appblog.inacorner.top/wp-content/themes/wpApp/api/homeSlide.php',
				// //     success: (res) => {
				// //         _self.homeSlide = res.data.post;
				// //     }
				// // });
			}
		},
	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.css';

	page {
		background-color: $uni-bg-color-grey;
	}

	.container {
		/* #ifdef H5 */
		padding-bottom: 150rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		padding-bottom: 15rpx;
		/* #endif */
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.topBackrop {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		background-image: linear-gradient(to bottom, #F8D849, #FFED9C);
	}

	.banner {
		width: 100%;
		height: 320rpx;
		padding: 0rpx 25rpx;
		display: flex;
		box-sizing: border-box;
	}

	.banner-item {
		width: 100%;
		height: 100%;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.notice-container {
		margin-left: 25rpx;
		margin-right: 25rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		background-color: white;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
	}

	.notice {
		width: 100%;
		height: 100%;
		padding: 0 20rpx;
	}

	.notice-item {
		width: 100%;
		height: 100%;
	}

	.notice-img {
		width: 120rpx;
		margin-left: 20rpx;
		justify-content: center;
		align-items: center;
		display: flex;
	}

	.notice-text {
		width: 100%;
		height: 100%;
		color: #292B35;
		align-items: center;
		display: flex;
		font-size: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.place-order {
		margin-top: 20rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
		padding: 20rpx 25rpx;
		background-color: white;
		border-radius: 20rpx;
		box-sizing: border-box;
		align-items: center;
	}

	.place-order-statistics {
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		color: #FF6600;
		display: flex;
		text-align: end;
		font-size: 28rpx;
		margin-top: 9rpx;
		margin-bottom: 14rpx;
	}

	.place-order-item {
		margin-top: 15rpx;
		width: 100%;
		height: 88rpx;
		border-radius: 20rpx;
		align-items: center;
		background-color: #F6F8FA;
		border-radius: 1;
	}

	.place-order-image {
		width: 35rpx;
		height: 35rpx;
		padding-left: 20rpx;
		padding-right: 10rpx;
		display: flex;
		align-items: center;
	}

	.place-order-text {
		height: 100%;
		text-align: start;
		color: rgba(88, 90, 97, 0.5);
		padding: 0rpx 6rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		font-weight: bold;
	}

	.place-order-more {
		margin-top: 20rpx;
		width: 100%;
		height: auto;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
	}

	.place-order-more-image {
		width: 35rpx;
		height: 35rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.place-order-more-text {
		height: 100%;
		text-align: end;
		color: rgba(41, 43, 53, 0.5);
		display: flex;
		justify-content: flex-end;
		align-items: end;
		font-size: 24rpx;
		transform: translateX(4%);
	}

	.place-order-get {
		margin-top: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		background-color: rgba(248, 216, 73, 1);
		border-radius: 50rpx;
		color: rgba(41, 43, 53, 1);
		font-size: 28rpx;
		font-weight: bold;
	}

	.place-order-tips {
		width: 100%;
		margin-top: 19rpx;
		margin-bottom: 6rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: auto;
		color: rgba(41, 43, 53, 0.5);
		font-size: 22rpx;
	}

	.place-order-menu {
		margin-top: 20rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
		height: auto;
		border-radius: 5rpx;
		align-items: center;
	}

	.place-order-menu-item {
		width: 100%;
		height: 110rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ffffff;
		border-radius: 20rpx;
		color: #333333;
		font-size: 25rpx;
	}

	.place-order-menu-item-img {
		width: 66.4rpx;
		height: 66.4rpx;
	}

	.place-order-menu-item-txt {
		height: 80rpx;
		display: flex;
		margin-left: 20rpx;
		color: rgba(41, 43, 53, 1);
		justify-content: center;
		align-items: center;
		font-weight: bold;
	}

	.service-advantages {
		margin-top: 20rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
		height: auto;
		padding: 40rpx 43rpx;
		background-color: white;
		border-radius: 20rpx;
		justify-content: center;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		align-items: center;
	}

	.service-advantages-text {
		width: 100%;
		display: flex;
		justify-content: center;
		margin: 0rpx 24rpx;
		align-items: center;
		color: rgba(41, 43, 53, 1);
		font-size: 30rpx;
		font-weight: bold;
	}

	.service-facts {
		margin-top: 20rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
		height: auto;
		padding-top: 38rpx;
		padding-left: 14rpx;
		padding-right: 14rpx;
		padding-bottom: 10rpx;
		background-color: white;
		border-radius: 20rpx;
		justify-content: center;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		align-items: center;
	}

	.service-facts-text {
		width: 100%;
		display: flex;
		justify-content: center;
		margin: 0rpx 24rpx;
		align-items: center;
		color: rgba(41, 43, 53, 1);
		font-size: 30rpx;
		font-weight: bold;
	}

	.service-facts-box {
		margin-top: 20rpx;
		width: 100%;
	}

	.service-facts-box-item {
		height: auto;
		padding: 10rpx 8rpx;
	}

	.service-facts-box-item-image {
		width: 100%;
		height: 200rpx;
		border-radius: 20rpx;
		background-color: #999999;
	}
</style>